<template>
  <view id="inspection">
		<view class="nav-box">
			<view class="nav-box-text">
				<image src="@/static/img/home/person.png" class="person"></image>
				<view class="welcome" v-if="roleStatus == 'sample'">
					<view><text>姓名：{{userInfos.nickName}}</text></view>
					<view><text>单位：{{userInfos.deptName}}</text></view>
				</view>
				<view class="welcome" v-else-if="roleStatus == 'audit'">
					<view><text>姓名：{{userInfos.nickName}}</text></view>
					<view><text>单位：{{userInfos.deptName}}</text></view>
				</view>
				<view class="welcome" v-else>
					<view><text>姓名：{{userInfos.nickName}}</text></view>
					<view><text>单位：{{userInfos.deptName}}</text></view>
				</view>
			</view>
		</view>
		<view class="project">
			<text>{{projectInfo.name}}</text>
			<button type="primary" size="mini" @click="drawerToggle('open')">
				<uni-icons type="search" color="#fff" size="14" />
			</button>
		</view>
		<view class="list-box">
			<view class="list-item" v-for="(item, index) in listData" :key="index">
				<view class="list-item-line title">
					<text class="item-text">巡检部位:{{ item.locationName }}</text>
				</view>
				<view class="list-item-line">
					<text class="sub-text">整改期限</text>
					<text class="sub-text u-margin-left-40">{{ item.deadline }}</text>
				</view>
				<view class="list-item-line">
					<text class="sub-text"><text class="short">状</text>态</text>
					<text class="sub-text u-margin-left-40">
						<text v-if="item.status == -1">退回</text>
						<text v-if="item.status == 0">草稿</text>
						<text v-if="item.status == 1">待回复</text>
						<text v-if="item.status == 2">待审核</text>
						<text v-if="item.status == 9">已完成</text>
					</text>
				</view>
				<view class="list-item-line">
					<text class="sub-text">创建人</text>
					<text class="sub-text u-margin-left-70">{{ item.createByName }}</text>
				</view>
				<view class="list-item-line">
					<text class="sub-text">问题等级</text>
					<text class="sub-text u-margin-left-40">
						<uni-tag text="普通" type="success" size="small" v-if="item.troubleLevel === 1" />
						<uni-tag text="中等" type="warning" size="small" v-if="item.troubleLevel === 2" />
						<uni-tag text="严重" type="error" size="small" v-if="item.troubleLevel === 3" />
					</text>
				</view>
				<view style="display: flex;justify-content: flex-end;">
					<uni-tag text="详情" class="u-margin-top-15" type="royal" size="small" @click="edit('2',item)" />
					<uni-tag text="编辑" v-if="item.status=='0'&& roleStatus != 'sample'" class="u-margin-top-15 u-margin-left-10" type="primary" size="small" @click="edit('1',item)" />
					<uni-tag text="删除" v-if="item.status=='0'&& roleStatus != 'sample'" class="u-margin-top-15 u-margin-left-10" type="error" size="small" @click="del(item)" />
				</view>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText"></uni-load-more>
		</view>
		<view class="bottom-nav" v-if="roleStatus != 'sample' && deptType=='supervise'">
			<button type="primary" class="btn" @click="edit('0')">新增</button>
		</view>
		
		<uni-drawer ref="queryDrawer" :width="300" :maskClick="false" mode="right">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="drawer-box">
					<uni-section title="条件搜索" type="line"></uni-section>
					<uni-list>
						<uni-list-item>
							<template v-slot:header><text class="slot-box">与我相关</text></template>
							<template v-slot:footer>
								<picker @change="mePickerChange" :value="meIndex" :range="meOptions" range-key="name">
									<view class="uni-input">{{meOptions[meIndex].name}}</view>
								</picker>
							</template>
						</uni-list-item>
						<uni-list-item>
							<template v-slot:header><text class="slot-box">项目状态</text></template>
							<template v-slot:footer>
								<picker @change="statusPickerChange" :value="statusIndex" :range="statusOptions" range-key="name">
									<view class="uni-input">{{statusOptions[statusIndex].name}}</view>
								</picker>
							</template>
						</uni-list-item>
						
						<uni-list-item>
							<template v-slot:header><text class="slot-box">项目部位</text></template>
							<template v-slot:body><text style="width: 10px;"></text></template>
							<template v-slot:footer>
								<uni-easyinput v-model="query.locationName" :inputBorder="false" placeholder="请输入" />
							</template>
						</uni-list-item>
						<uni-list-item>
							<template v-slot:header><text class="slot-box">责任人</text></template>
							<template v-slot:body><text style="width: 10px;"></text></template>
							<template v-slot:footer>
								<view class="tree-select" @click="personTreeCheck(1)">
									{{ leadPerson }}
								</view>
							</template>
						</uni-list-item>
						<uni-list-item>
							<template v-slot:header><text class="slot-box">申请人</text></template>
							<template v-slot:body><text style="width: 10px;"></text></template>
							<template v-slot:footer>
								<view class="tree-select" @click="personTreeCheck(2)">
									{{ applyPerson }}
								</view>
							</template>
						</uni-list-item>
	
						<uni-list-item>
							<template v-slot:header><text class="slot-box">日期</text></template>
							<template v-slot:body><text style="width: 10px;"></text></template>
							<template v-slot:footer>
								<uni-datetime-picker v-model="range" :border="false" type="date" @change="dateChange" />
							</template>
						</uni-list-item>
					</uni-list>
					<button @click="search" type="primary" class="u-margin-20">查询</button>
					<button @click="drawerToggle('close')" type="default" class="u-margin-20" style="background-color: #fff;">取消</button>
				</view>
				
			</scroll-view>
		</uni-drawer>

		<!-- 人员树 -->
		<tki-tree ref="tkitree" :range="personTree" confirmColor="#4e8af7" @confirm="personTreeSelect" @cancel="personTreeCancel" />
		<!-- 组织树 -->
		<tki-tree ref="depttree" :range="deptTree" confirmColor="#4e8af7" @confirm="deptTreeSelect" @cancel="deptTreeCancel" />
  </view>
</template>

<script>
import {mapState} from 'vuex'
import tkiTree from "@/components/tki-tree/tki-tree"
import {projectList,getPerson,deleteCheck} from '@/api/inspection/index.js'
export default {
	components: { tkiTree },
  data() {
    return {
		deptType:'',
			userInfos:{
				nickName:'',
				deptName:''
			},
			roleStatus: 'company',
			// 查询条件
			
			
      query: {
				  pageNum:1,
				  pageSize:10,
				  total:0,
				// type: '',
				// status: '',
				// locationName: '',
				// zrrName: '',
				// fqrName: '',
				// deadline:''
			},
			// 列表数据
			listData: [],
			// 上拉加载相关
			last_id: '',
			reload: false,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			},
			// 与我相关
			meOptions: [
				{ value: '', name: '全部' }, 
				{ value: 1, name: '我发起的' }, 
				{ value: 2, name: '我整改的' }, 
				{ value: 3, name: '我参与的' }, 
			],
			meIndex: 0,
			// 项目状态
			statusOptions: [
				{ value: '', name: '全部' }, 
				{ value: -1, name: '退回' }, 
				{ value: 0, name: '草稿' }, 
				{ value: 1, name: '发起' }, 
				{ value: 2, name: '待审核' }, 
				{ value: 9, name: '已完成' }, 
			],
			statusIndex: 0,
			// 项目属性
			recordOptions: [
				{ value: '', name: '全部' }, 
				{ value: 0, name: '巡检记录' },
				{ value: 1, name: '巡检状态' }, 
			],
			recordIndex: 0,
			// 责任人
			leadPerson: '请选择',
			// 申请人
			applyPerson: '请选择',
			// 分包单位
			company: '请选择',
			// 选择责任人/申请人
			personTreeCheckType: 1,
			// 人员树
			personTree: [
				// { id: 1, label: '赛迪', children: [ { id: 11, label: '张三' }, { id: 12, label: '李四' }, { id: 13, label: '王五' }] },
			],
			// 组织树
			deptTree: [
				{ id: 1, label: '赛迪', children: [ { id: 11, label: '赛信' }, { id: 12, label: '复城国际' }] },
				{ id: 2, label: '建委', children: [ { id: 21, label: '村镇处' }, { id: 22, label: '信息中心' }, { id: 23, label: '科教处' }] },
			],
			// 日期范围
			range: []
    }
  },
  computed:{
	 ...mapState(['projectInfo']) 
  },
  onLoad() {
    uni.getStorage({
  			key: 'roleStatus',
  			success: res=> {
  				this.roleStatus = res.data
  			}
    })
	uni.getStorage({
			key: 'userInfo',
			success: res=> {
				this.userInfos.nickName=res.data.nickName
				this.userInfos.deptName=res.data.dept.deptName
				this.deptType=res.data.dept.type
			}
	})
	this.getTable(this.query)
    this.getPersons()
  },
  onReady() {
		uni.getStorage({
			key: 'roleStatus',
			success: res=> {
				this.roleStatus = res.data
			}
		})
    // this.getList();
  },
  // onPullDownRefresh() {
  // 	this.reload = true;
  // 	this.last_id = '';
  // 	this.getList();//下拉刷新
  // },
  onReachBottom() {
  	this.reload = true
  	this.status = 'more'
  	this.getList();//下拉刷新
	
	
  },
  methods: {
	  onBackPress(e) {
	     uni.navigateTo({
	      url: '/pages/menu/index'
	     })
	     return true;
	    },
	  //列表数据
	 async getTable(){
			let data=await projectList(this.query)
			 if(data.code==200){
				this.listData=this.listData.concat(data.rows)
			 	this.query.total=data.total
			 }
			 if(Math.ceil(this.query.total/this.query.pageSize)<this.query.pageNum &&this.query.total!=0){
			 	this.status = 'more'
			 }else{
			 	this.status = 'noMore'
			 }
	  },
	  //查询责任人
	  getPersons(){
	  		getPerson(this.projectInfo.id).then(res=>{
	  			if(res.code==200){
	  				this.personTree=res.rows.map(item=>{
	  					return {
							id:item.id,
							label:item.deptName,
							children:item.person.map(items=>{
								return {
									id:items.personId,
									label:items.nickName
								}
							})
						}
	  				})
	  			}
	  		}) 
	  },
	  //查询
	  search(){
		  projectList(this.query).then(data=>{
			  if(data.code==200){
			  	this.listData=data.rows
			  	this.query.total=data.total
			  			if(Math.ceil(this.query.total/this.query.pageSize)<this.query.pageNum){
			  				this.status = 'more'
			  			}else{
			  				this.status = 'noMore'
			  			}
			  }
			  this.$refs.queryDrawer.close();
		  })
	  },
    getList() {
			this.status = 'loading'
			//列表数据
			if(Math.ceil(this.query.total/this.query.pageSize)<this.query.pageNum){
				this.status = 'loading'
				this.getTable(this.query)
			    this.query.pageNum++
			}else{
				this.status = 'noMore'
			}
	
          
	},
		// 打开右侧查询抽屉
		drawerToggle(type) {
			if (type == 'open') {
				this.$refs.queryDrawer.open();
			} else {
				this.$refs.queryDrawer.close();
			}
		},
		// 与我相关选中
		mePickerChange(e) {
			this.meIndex = e.detail.value
			let obj = this.meOptions.find((item, index)=>{ return index === e.detail.value })
			this.query.type = obj.value
		},
		// 项目状态选中
		statusPickerChange(e) {
			this.statusIndex = e.detail.value
			let obj = this.statusOptions.find((item, index)=>{ return index === e.detail.value })
			this.query.status = obj.value
		},
		// 项目属性选中
		recordPickerChange(e) {
			this.recordIndex = e.detail.value
			let obj = this.recordOptions.find((item, index)=>{ return index === e.detail.value })
			this.query.record = obj.value
		},
		// 打开人员树
		personTreeCheck(type) {
			this.personTreeCheckType = type
			this.$refs.tkitree._show()
		},
		// 人员树选择
		personTreeSelect(e) {
			if (e && e.length > 0) {
				if (this.personTreeCheckType == 1) {
					this.query.zrrName = e[0].id
					this.leadPerson = e[0].label
				} else {
					this.query.fqrName = e[0].id
					this.applyPerson = e[0].label
				}
			}
		},
		// 人员树取消选择
		personTreeCancel(e) {
			if (this.personTreeCheckType == 1) {
				this.query.zrrName = ''
				this.leadPerson = '请选择'
			} else {
				this.query.fqrName = ''
				this.applyPerson = '请选择'
			}
		},
		// 组织树选择
		deptTreeSelect(e) {
			if (e && e.length > 0) {
				this.query.companyId = e[0].id
				this.company = e[0].label
			}
		},
		// 组织树取消选择
		deptTreeCancel(e) {
			this.query.companyId = ''
			this.company = '请选择'
		},
		// 日期范围选择
		dateChange(e) {
			this.query.deadline = e
	
		},
    view(row) {
    	uni.navigateTo({
    		url: '/pages/inspection/edit'
    	})
    },
	  //state新增编辑状态0为新增，1为编辑,2为详情
		edit(state,row) {
			let datas={}
			if(row==undefined){
				datas=JSON.stringify({status:state,id:''})
			}else{
				datas=JSON.stringify({status:state,id:row.id})
			}
			
			uni.navigateTo({
				url: `/pages/inspection/edit?obj=${datas}`
			})
			// uni.$emit('statess',{status:state,row:row})
		},
		del(row) {
			uni.showModal({
			    title: '确认删除',
			    success:  (res)=> {
			        if (res.confirm) {
			            deleteCheck(row.id).then(item=>{
			            	if(item.code==200){
			            		uni.showToast({
			            			title:'删除成功',
			            			icon:'success'
			            		})
			            		this.query.pageNum=1
			            		this.listData=[]
			            		this.getTable(this.query)
			            	}else{
			            		uni.showToast({
			            			title:item.msg,
			            			icon:'error'
			            		})
			            	}
			            })
			        } else if (res.cancel) {
			            
			        }
			    }
			});
		}
  }
}
</script>
<style lang="scss" scoped>
	#inspection {
		background-color: #fafafa;
		min-height: 100vh;
		
		.nav-box {
			width: 100vw;
			height: 160px;
			margin-top: -44px;
			padding: 56px 20px 56px 20px;
			background-image: url(../../static/img/home/head-bg.png);
			
			.nav-box-text {
				height: 50px;
				display: flex;
				align-items: center;
				
				.person {
					width: 48px;
					height: 48px;
				}
				.welcome {
					color: #333;
					font-size: 32rpx;
					margin-left: 40rpx;
				}
			}
		}
		
		.project {
			padding: 10px;
			display: flex;
			border-radius: 8px;
			align-items: center;
			background-color: #fff;
			margin: -32px 20px 0 20px;
			justify-content: space-between;
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .1);
			
			text {
				font-size: 14px;
				font-weight: 700;
			}
			/deep/ uni-button {
				margin: 0;
				flex: 0 0 auto;
				padding: 2px 4px;
				line-height: normal;
			}
		}
		
		.list-box {
			margin-top: -20px;
			padding: 20px 20px 70px 20px;
			
			.list-item {
				padding: 10px;
				margin-top: 10px;
				min-height: 50px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .1);
				
				.list-item-line {
					height: 36px;
					display: flex;
					position: relative;
					align-items: center;
					border-bottom: 1rpx solid #bfbfbf;
					
					.item-text {
						overflow: hidden;
						font-weight: 700;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.sub-text {
						color: #999;
					}
					.short {
						letter-spacing: 32px;
					}
				}
				.title {
					justify-content: space-between;
				}
			}
		}
		
		.bottom-nav {
			left: 0;
			bottom: 0;
			width: 100vw;
			height: 50px;
			padding: 10px;
			position: fixed;
			background-color: #fff;
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .1);
		}
		
		.drawer-box {
			height: 100vh;
			background-color: #f8f8f8;
			
			.uni-section {
				margin: 0;
				height: 36px;
			}
			.uni-input {
				color: #888;
			}
			.tree-select {
				flex: 1;
				color: #888;
				font-size: 14px;
				padding-left: 10px;
			}
			/deep/ .uni-easyinput__content {
				min-height: 24px;
			}
			/deep/ .uni-date__x-input {
				padding: 0;
				height: 24px;
				font-size: 12px;
				line-height: 24px;
				
				.uni-input-input{
					width: 80px;
				}
			}
			/deep/ .uni-date__icon-clear {
				top: 1px;
				margin: 0;
				border: 0;
			}
		}
	}
</style>
